<template>
  <div style="height: 100%;display: flex">
    <div class="list-page" style="padding:10px;width: 50%">
      <!-- 操作组 -->
      <div class="header-bar">
        <ButtonGroup class="float-left">
          <Button icon="h-icon-plus" @click="add">添加</Button>
          <Button :disabled="selects.length!=1" icon="h-icon-edit" @click="editFirst">修改</Button>
          <Poptip :isdisabled="selects.length==0" class="h-btn" content="确定删除所选记录？" @confirm="del">
            <Button icon="h-icon-trash">删除</Button>
          </Poptip>
        </ButtonGroup>
        <!-- 工具条 -->
        <div>
          <Input type="text" v-model="table.params.name" placeholder="名称或编码"/>
          <Button icon="h-icon-search" @click="table.load()"></Button>
        </div>
      </div>
      <div class="list">
        <Table :datas="table.data" :loading="table.loading" @trdblclick="edit" @select="selected" checkbox>
          <TableItem title="名称">
            <template slot-scope="{data}">
              <span class="link" @click="showSub(data)" style="display: inline-block;width: 100%">{{data.name}}</span>
            </template>
          </TableItem>
          <TableItem title="编码" prop="sn"></TableItem>
        </Table>
      </div>
    </div>
    <div class="list-page" style="padding:10px;width: 50%">
      <!-- 操作组 -->
      <div class="header-bar">
        <ButtonGroup class="float-left">
          <Button icon="h-icon-plus" @click="sub_add" :disabled="subSn == null">添加</Button>
          <Button :disabled="sub_selects.length!=1" icon="h-icon-edit" @click="sub_editFirst">修改</Button>
          <Poptip :isdisabled="sub_selects.length==0" class="h-btn" content="确定删除所选记录？" @confirm="sub_del">
            <Button icon="h-icon-trash">删除</Button>
          </Poptip>
          <Button icon="h-icon-refresh" @click="sub.load()"></Button>
        </ButtonGroup>
        <span style="line-height: 31px;">
          <h3>{{subText}}</h3></span>
      </div>
      <div class="list">
        <Table :datas="sub.data" :loading="sub.loading" @trdblclick="edit" @select="sub_selected" checkbox>
          <TableItem title="名称" prop="name"></TableItem>
          <TableItem title="编码" prop="sn"></TableItem>
          <TableItem title="排序" prop="rank"></TableItem>
        </Table>
      </div>
    </div>
    <DictionaryDialog ref="dlg" :dict-type="dictType" @change="reload">
    </DictionaryDialog>
  </div>
</template>
<script>
import {DataSource, ajax, util} from 'framework'
import DictionaryDialog from './dictionaryDialog'

let table = new DataSource('dictionary/list?type=dict')
table.method="get"
let sub=new DataSource('dictionary/list')
export default {
  name: "Dictionary",
  components: {DictionaryDialog},
  data() {
    return {
      showSearch: false,
      table: table,
      sub:sub,
      selects: [],
      sub_selects: [],
      subSn:null,
      subText:'',
      dictType:'dict'
    }
  }, mounted() {
    table.load()
  },
  methods: {
    reload() {
      this.selects = []
      if(this.dictType=='dict'){
        table.load()
      }else{
        sub.load()
      }
    },
    search() {
      this.selects = []
      table.pagination.page = 1;
      table.load()
    },
    selected(v) {
      this.selects = v.map(it => util.fields(it, 'id'))
    },
    sub_selected(v) {
      this.sub_selects = v.map(it => util.fields(it, 'id'))
    },
    resetSerarch() {
      table.params = {}
      this.reload()
    },
    add() {
      this.dictType='dict'
      this.$nextTick(()=>{
        this.$refs.dlg.show()
      })
    },
    sub_add(){
      this.dictType=this.subSn
      this.$nextTick(()=>{
        this.$refs.dlg.show()
      })
    },
    editFirst() {
      if (this.selects.length == 0) {
        return;
      }
      this.edit(this.selects[0])
    },
    sub_editFirst() {
      if (this.sub_selects.length == 0) {
        return;
      }
      this.edit(this.sub_selects[0])
    },
    edit(v) {
      this.$refs.dlg.show(util.fields(v, 'id'))
    },
    del() {
      ajax.post('dictionary/delete', this.selects).then(r => {
        this.reload()
      })
    },
    sub_del() {
      ajax.post('dictionary/delete', this.sub_selects).then(r => {
        this.reload()
      })
    },
    showSub(dt){
      this.subText=dt.name
      this.subSn=dt.sn
      sub.params.type=dt.sn;
      sub.load()
    }
  }
}
</script>
